<template>
	<view class="page">
		<view class="header">
			<view class="title">
				<text>欢迎来到智能校园疫情防控平台</text>
			</view>
			<view class="subtitle">
				<text>我们将为你提供优质的服务</text>
			</view>
		</view>
		<view class="forms">
			<uni-forms ref="formData" :modelValue="formData" :rules="rules">
				<uni-forms-item required label="用户名" name="username">
					<uni-easyinput v-model="formData.username" placeholder="请输入用户名(手机号)" />
				</uni-forms-item>
				<uni-forms-item required label="密码" name="password">
					<uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item required label="验证码" name="code" class="validateCode">
					<uni-easyinput class="code" v-model="formData.code" placeholder="请输入验证码" />
					<image v-bind:src="codeSrc" @click="getCode" alt="验证码" style="height:35px; width:100px"></image>
				</uni-forms-item>
			</uni-forms>
			<button class="btn-login" @click="login()" type="primary">登录</button>
		</view>
		<view class="des-text">
			<view class="mini-text" @click="goLogup">
				注册
			</view>
			<view class="mini-text" @click="goForgetPassWord">
				忘记密码
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/utils/api.js'
	
	export default {
		onLoad() {
			this.getCode()
		},
		data() {
			return {
				formData: {
					username: '',
					password: '',
					code: '',
					uuid: ''
				},
					
				publicKey: '',
				codeSrc: '',
				rules: {
					//对用户名字段进行必填验证
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						},
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '手机号长度需为{maxLength}'
						}],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					}
				},
				// 分段器数据
				current: 0,
				items: ['左对齐', '顶部对齐'],
			}
		},
		methods: {
			onload() {
				uni.getStorage({
					key: 'token',
					success: function(res) {
						if (res.data !== "") {
							request('/valid').then(resp => {
								console.log('resp', resp);
								if (resp.msg === 'ok') {
									uni.reLaunch({
										url: '/pages/code/code'
									})
								} else {
									console.log('token过期');
									uni.removeStorage({
										key: 'token'
									})
								}
							})
						} 
					},
					fail() {
						console.log('未登录');
						// 未登录，跳转登录
					}
				})
			},
			
			login() {
				this.$refs.formData.validate().then(res=>{
					// console.log('表单验证success', res);
					request('/login', {
						code: this.formData.code,
						password: this.formData.password,
						phone: this.formData.username,
						uuid: this.formData.uuid
					}, "POST").then(resp => {
						if (resp.code !== 200) {
							uni.showToast({
								icon:'error',
								title: resp.msg
							})
							this.getCode()
							return
						}
						uni.setStorage({
							key: 'token',
							data: resp.data.token
						})
						console.log('用户信息：', resp.data.user);
						uni.setStorageSync('userInfo', resp.data.user)
						// 页面跳转
						uni.showToast({
							title: `登录成功`
						})
						// 登录成功之后跳转页面
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}).catch(err => {
						// console.log(err);
					})
				}).catch(err=>{
					// console.log('表单验证err', err);
				})
				
			},
			getCode() {
				
				request('/code/captchaImage').then(resp => {
					this.codeSrc = "data:image/gif;base64," + resp.img
					this.formData.uuid = resp.uuid
				}).catch(err => {
					console.log(err);
				})
			},
			//更新验证码
			refreshImg() {
				uni.request({
					url: '',
					method: 'POST',
					data: {},
					success: res => {
						//更新验证码路径
						this.imgsrc = res.data.imgsrc
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goLogup() {
				console.log("前往注册页面");
				uni.navigateTo({
					url: '/pages/logup/logup'
				});
			},
			goForgetPassWord() {
				console.log("忘记密码");
			}
		}
	}
</script>

<style>
	.forms {
		padding: 12px;
		background-color: #fff;
	}

	.title {
		text-align: center;
		font-size: 22px;
		font-weight: 700;
		margin: 40rpx;
	}

	.subtitle {
		text-align: center;
		margin: 50rpx;
	}

	.validateCode {
		display: flex;
		flex-direction: row;
		justify-content: space-around
	}

	.des-text {
		margin-top: 3vh;
		padding: 0 8vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.btn-login {
		margin-top: 10vh;
	}

	.mini-text {
		cursor: pointer;
		color: #3c9cff;
	}
</style>
